<template>
    <div>
        <header>
            <h1>大数据可视化</h1>
        </header>
        <!-- 大容器 -->
        <section class="container">
            <!-- 左容器 -->
            <section class="itemLeft">
                <ItemPage>
                    <ItemOne></ItemOne>
                </ItemPage>
                <ItemPage>
                    <ItemTwo></ItemTwo>
                </ItemPage>
            </section>
            <!-- 中容器 -->
            <section class="itemCenter">
                <CmapPage></CmapPage>
            </section>
            <!-- 右容器 -->
            <section class="itemRight">
                <ItemPage>
                    <ItemThree></ItemThree>
                </ItemPage>
                <ItemPage>
                    <ItemFour></ItemFour>
                </ItemPage>
            </section>
        </section>
    </div>
</template>

<script setup>
import ItemPage from '@/components/itemPage.vue'
// 引入左右四个图表组件
import ItemOne from '@/components/itemOne.vue'
import ItemTwo from '@/components/itemTwo.vue'
import ItemThree from '@/components/itemThree.vue'
import ItemFour from '@/components/itemFour.vue'
import CmapPage from '@/components/cmapPage.vue'
</script>

<style lang="less" scoped>
header {
    height: 1rem;
    width: 100%;
    /* 设置一个半透明淡蓝色 */
    background-color: rgba(0, 0, 255, 0.2);
    /* 把标题文字样式设置 */
    h1 {
        font-size: 0.375rem;
        color: #fff;
        text-align: center;
        line-height: 1rem;
    }
}
// 主体容器样式
.container {
    // 这里就不需要设置使用rem了
    min-width: 1200px;
    max-width: 2048px;
    margin: 0 auto;
    // 盒子上10px 左右10px 下0的外边距
    padding: 0.125rem 0.125rem 0;
    display: flex; //父容器设置flex布局才能在子元素使用
    // 设置左中右的占比 但是不要忘了在父容器要设置flex
    .itemLeft,
    .itemRight {
        flex: 3;
    }
    .itemCenter {
        flex: 5;
        height: 10.5rem;
        border: 1px solid blue;
        padding: 0.125rem;
        margin: 0.25rem;
    }
}
</style>
